<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>Clínica Odontológica</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="title" content="Web site" />
    <meta name="description" content="Site description here" />
    <meta name="keywords" content="keywords here" />
    <meta name="language" content="en" />
    <meta name="subject" content="Site subject here" />
    <meta name="robots" content="All" />
    <meta name="copyright" content="Your company" />
    <meta name="abstract" content="Site description here" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <link id="theme" rel="stylesheet" type="text/css" href="style.css" title="theme" />
	<script src="js/jquery.js"></script>
  </head>
  <body> 
  
  <script>

  function janela(j){
  $("#"+j+"").fadeIn();  
  }
 
 function fechar(j){
  $("#"+j+"").fadeOut();  
  }
  
  function Mascara(objeto){ 
   if(objeto.value.length == 0)
     objeto.value = '(' + objeto.value;

   if(objeto.value.length == 3)
      objeto.value = objeto.value + ')';

 if(objeto.value.length == 8)
     objeto.value = objeto.value + '-';
}
  
  </script>
    <!-- top wrapper -->  
    <div id="topWrapper"> 
      <div id="topBanner"></div> 
    </div>  
    <div id="topnav"> 
      <ul>
        <li id="current" style="border:none">
          <a href="#" shape="rect">Consultas</a>
        </li>
        <li>
          <a href="javascript:void(0)" onclick="javascript:janela('agendar');" shape="rect">Agendar</a>
        </li>
		
		 <li>
          <a href="javascript:void(0)" onclick="javascript:janela('cadastrar');" shape="rect">Cadastrar Paciente</a>
        </li>
      </ul> 
    </div>  
		 <div style="width:700px; position:relative; z-index:1;  height:auto; padding:40px 40px 80px 40px; background:#fbfbfb; border:solid 1px #dedede; display:block; margin:30px auto;" id="agendar" name="agendar">
				<a href="javascript:void(0)" class="whitishBtn button_small" name="fechar" id="fechar" onclick="javascript:fechar('agendar')" style="float:right; margin-top:-10px;">X</a>		
							
				 <h3>Agendar Consulta</h3>  
				 <div style="width:694px; height:auto; padding:3px; background:#4a7a63; border:solid 1px #446e5a; color:#fff; font-size:10px; font-weight:bold;" >
					<table width="694"  >
						<tr>
							<td  width="35%">Doutor</td>
							<td  width="35%">Paciente</td>
							<td  width="20%">Dia</td>
							<td  width="10%">Horário</td>
						</tr>
					</table>
					<form id="form1" name="form1" >
						<table width="694"  >
						<tr>
							<td  width="35%"><select><option value=""></option></select></td>
							<td  width="35%"><select><option value=""></option></select></td>
							<td  width="20%">
								<select id="dia">
									<script>
									x=31;
									for(i=0; i < x; i++){
									
										  linha = document.createElement("OPTION");
										  if(i==0){
										  linha.value = 0;
										  linha.text = "Escolha";
											}else{
										  linha.value = i;
										  linha.text = i;
										  }
										   document.forms[0].dia.appendChild(linha);
											}
									</script>									
								</select>
							</td>
							<td  width="10%"><select><option value=""></option></select></td>
						</tr>
					</table>
					</form>
				  </div>

				  <a style="margin-top:10px;  float:right;" class="whitishBtn button_small" href="#">Agendar</a>
				 </div>
				 
				  <div style="width:700px; position:relative; z-index:1;  height:auto; padding:40px 40px 80px 40px; background:#fbfbfb; border:solid 1px #dedede; display:block; margin:30px auto;" id="cadastrar" name="cadastrar">
				<a href="javascript:void(0)" class="whitishBtn button_small" name="fechar2" id="fechar2" onclick="javascript:fechar('cadastrar')" style="float:right; margin-top:-10px;">X</a>		
				<h3>Cadastrar Paciente</h3>  
				  <div style="width:694px; height:auto; padding:3px; background:#4a7a63; border:solid 1px #446e5a; color:#fff; font-size:9px; font-weight:bold;" >
					<table width="694" >
					<tr>
					<td  width="38%">Nome</td>
					<td  width="39%">Endereço</td>
					<td  width="13%">Tel</td>
					<td  width="10%">Plano</td>
					</tr>
					</table>
					<table width="694" >
						<tr>
							<td  width="37%"><input type="text" style="width:250px; float:left;" id="nome"></input></td>
							<td  width="35%"><input type="text" style="width:263px;float:left;" id="end"></input></td>
							<td  width="16%"><input type="text" style="width:80px;float:left;" maxlength="13" onkeypress="Mascara(this);" id="tel"></input></td>
							<td  width="9%"><input type="text" style="width:62px; float:right;" id="plano"></input></td>
						</tr>
					</table>
				  </div>
				  <a style="margin-top:10px; float:right;" class="whitishBtn button_small" href="#">Cadastrar</a>
				
				  </div>

    <!-- end top wrapper -->  
    <div id="wrapper"> 
      <div id="bg"> 
        <div id="header"></div>  
        <div id="page"> 
          <!-- begin container -->  
          <div id="container"> 
            <!--  content -->  
            <div id="content"> 
              <div id="center"> 
                <div id="welcome"> 
                  <h3>Consultas agendadas</h3>  
                  <div style="width:500px; height:auto; padding:10px; background:#fbfbfb; border:solid 1px #dedede;">
				  <div style="width:494px; height:auto; padding:3px; background:#4a7a63; border:solid 1px #446e5a; color:#fff; font-size:10px; font-weight:bold;" >
					<table width="494"  >
					<tr>
					<td  width="35%">Doutor</td>
					<td  width="35%">Paciente</td>
					<td  width="20%">Dia</td>
					<td  width="10%">Horário</td>
					</tr>
					</table>
				  </div>
					<table style="width:500px; margin-top:10px; padding:10px; height:auto; padding:3px; background:#dedede; border:solid 1px #d1d1d1; color:#777777; font-size:10px; font-weight:bold;" >
					<tr>
					<td  width="35%">bruno kingma</td>
					<td  width="35%">flaviane rodrigues</td>
					<td width="20%">10/02/2012</td>
					<td width="10%">18h</td>
					</tr>
					</table>
				 </div>
               
                </div> 
              </div>  
              <div id="right"> 
                <div id="sidebar"> 
                  <h3>Acesso ao administrador</h3> 
				  <form action="" method="POST" class="textoLogin">
						<input type="login" id="login" size="27" value="login" ></input>
						<input type="password" id="senha" size="27" value="senha"></input>
						<input type="submit" value="logar" class="whitishBtn button_small" ></input>
                  </form>
				 </div> 
              </div>  
              <div class="clear" style="height:40px"></div> 
            </div>  
            <!-- end content --> 
          </div>  
          <!-- end container --> 
        </div>  
        <div id="footerWrapper"></div> 
      </div> 
    </div>  
    <div id="bottomWrapper"> 
      <div id="footer"> 
        <p style="padding-top:20px"> 
			Desenvolvimento de Aplicações Web utilizando Java 
        </p> 
      </div> 
    </div> 
	

  </body>
</html>
